<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>vue 计算属性</title>
</head>
<body>
<div id="app">
    <h1>姓：{{ familyName }}</h1>
    <h1>名：{{ givenName }}</h1>

    <h1>姓名：{{ familyName + " " + givenName }}</h1>


    <h1>姓名：{{ fullName }}</h1>


    <h1>姓名：{{ fullName }}</h1>
    <h1>姓名：{{ fullName }}</h1>
    <h1>姓名：{{ fullName }}</h1>
    <h1>姓名：{{ fullName }}</h1>
</div>

<script type="module">
    import {createApp, ref, computed} from "../../../js/vue.esm-browser.js";

    let app = createApp(
        {
            setup() {
                let familyName = ref("kevin")
                let givenName = ref("abcque")

                let language = ref("英文")

                let fullName = computed(
                    () => {
                        console.log("调用了 fullName");
                        if (language.value === "英文") {
                            return familyName.value + " " + givenName.value
                        } else {
                            return familyName.value + givenName.value
                        }
                    }
                )

                return {
                    familyName, givenName, fullName, language,
                }
            }
        }
    );

    app.mount("#app")
</script>
</body>
</html>